<template>
<div class="swiper">
  <swiper :options="swiperOption" ref="mySwiper" v-if="list.length">
    <!-- slides -->
    <swiper-slide v-for='(item,index) of list' :key="item.id">
        <img  class="swiper-img" :src="item.imgUrl" >
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    props:{
        list:Array
    },
    data () {
    	return {
    		swiperOption:{
                 autoplay: 1500,
                 pagination: '.swiper-pagination',
                 loop:true
            }
    	}
    }
}
</script>


<style lang="stylus"  scoped>
.swiper>>> .swiper-pagination-bullet-active
 background:#fff !important
.swiper
   overflow:hidden
   width:100%
   height:2.2rem
   .swiper-img{
       width:100%
   }
</style>